<template>
    <div :id="chartId" style="width: 100%;height:400px;"></div>
</template>

<script>
    import echarts from 'echarts'
    import service from "../../../service/projects";

    export default {
        name: "chart1",
        components: {
            //someComponent
        },
        props: ['chartId', 'chartYjryData', 'chartLwData', 'centerData', 'lwxzList', 'type'],
        data() {
            return {
                msg: "Hello Vue.js",
                id: '',
                key: '',
            }
        },
        computed: {},
        watch: {
            type: function (newVal, oldVal) {
                if (newVal) {
                    this.id = newVal === 'F0701' ? '1060' : '1059'
                    this.key = newVal === 'F0701' ? 'approval_year' : 'academic_department'
                    this.load2019Top10Data();
                }
            }
        },
        mounted: function () {
            this.id = this.type === 'F0701' ? '1060' : '1059'
            this.key = this.type === 'F0701' ? 'approval_year' : 'academic_department'
            this.load2019Top10Data();
        },
        methods: {
            load2019Top10Data(){
                const schoolnameArr = [];
                this.chartDiv = echarts.init(document.getElementById(this.chartId));
                this.chartDiv.showLoading({
                    text: '数据正在加载...',
                    textStyle: { fontSize : 30 , color: '#444' },
                    effectOption: {backgroundColor: 'rgba(0, 0, 0, 0)'}
                });

                service.getDatas({
                    columns:['approval_year', 'project_type','count:id', 'sum:funding_amount'],
                    group:['approval_year', 'project_type'],
                    order:[['sum:funding_amount',0]],
                    // approval_year:2019,
                    approval_year:2018,
                }, this.id).then(res=>{
                    //add data for f0701_2020
                    let f0701_2020_data=[
                        {_count_id: 45,_sum_funding_amount: 2160,approval_year: "2020",project_type: "面上项目"},
                        {_count_id: 31,_sum_funding_amount: 744,approval_year: "2020",project_type: "青年科学基金项目"},
                        {_count_id: 9,_sum_funding_amount: 324,approval_year: "2020",project_type: "地区科学基金项目"},
                        {approval_year: "2019", project_type: "重点项目", _count_id: 1, _sum_funding_amount: 299},
                        {approval_year: "2019", project_type: "地区科学基金项目", _count_id: 10, _sum_funding_amount: 336},
                        {approval_year: "2019", project_type: "青年科学基金项目", _count_id: 26, _sum_funding_amount: 414},
                        {approval_year: "2019", project_type: "面上项目", _count_id: 45, _sum_funding_amount: 2250},  
                        {approval_year: "2018", project_type: "优秀青年基金项目", _count_id: 1, _sum_funding_amount: 130},
                        {approval_year: "2018", project_type: "地区科学基金项目", _count_id: 4, _sum_funding_amount: 152},
                        {approval_year: "2018", project_type: "青年科学基金项目", _count_id: 17, _sum_funding_amount: 340},
                        {approval_year: "2018", project_type: "面上项目", _count_id: 38, _sum_funding_amount: 1724} 
                    ];
                    //res.data.concat(f0701_2020_data); // why not work?...
                    console.log("resdata",res)
                    f0701_2020_data.forEach(item=>res.data.push(item));
                    this.initChart(f0701_2020_data);
                })
            },
            initChart(data){

                // 'use strict';
                if (!document.getElementById(this.chartId)) return;
                echarts.init(document.getElementById(this.chartId)).dispose();
                this.chartDiv = echarts.init(document.getElementById(this.chartId));

                const xAxisData = Array.from(new Set(data.map(i => i.approval_year)));
                const legendData = Array.from(new Set(data.map(i => i.project_type)));

                let seriesData = [];
                legendData.forEach(i => {
                    seriesData.push({
                        name: i,
                        type: 'bar',
                        // silent: true,
                        barWidth: '50',
                        barMinHeight: 2,
                        stack: 'total',
                        // barGap: '-100%', // Make series be overlap
                        data: xAxisData.map(j => data.find(k => k['project_type'] === i && k['approval_year'] === j)
                        ? data.find(k => k['project_type'] === i && k['approval_year'] === j)._sum_funding_amount
                        : 0),
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,		//开启显示
                                    position: 'inside',	//在上方显示
                                    textStyle: {	    //数值样式
                                        color: '#fff',
                                        fontSize: 12,
                                    }
                                }
                            }
                        }
                    })
                })


                const option = {
                    color:['#1bc481', '#ffaf3c', '#eb5e66', '#3898e5', "#7EC0EE", "#FF9F7F", "#FFD700", "#C9C9C9", "#E066FF", "#C0FF3E"],
                    // const color =['#1bc481',  '#ffaf3c',  '#eb5e66' , '#3898e5', '#1cf9ea' ];
                    title: {
                        //text: '2018-2019年自科F0701代码资助金额对比',
                        // subtext: '（按2019年批准项目数量前十依托单位排序）',
                        top: 10,
                        left: 'center',
                        textStyle: {
                            fontSize: 16,
                            color: 'grey',
                        },
                    },
                    animation: false,
                    grid: {
                        top: '50',
                        left: '32',
                        bottom: '45',
                        right: '39',
                        containLabel: true,
                    },
                    legend: {
                        show: true,
                        bottom: 0,
                        // left: 'middle',
                        data: legendData,
                        textStyle: {
                            // color: 'RGB(193,223,255)',
                        },
                    },
                    tooltip: {
                        trigger: "axis",
                    },
                    xAxis: [{
                        type: 'category',
                        name: '年份',
                        nameTextStyle: {
                            fontSize: 12, // 这个会影响坐标轴的字体大小，不懂为什么
                            fontFamily: '微软雅黑',
                            align: 'center',
                        },
                        data: xAxisData,
                        axisTick: {
                            show: false,
                        },
                        axisLine: {
                            lineStyle: {
                                color:  'rgba(202,202,202,0.15)',
                            },
                        },
                        axisLabel: {
                            // rotate: 45,
                            // margin: 20,
                            textStyle: {
                                color: 'black',
                            },
                        },
                    }],
                    yAxis: [{
                        type: 'value',
                        name: '金额（万元）',
                        nameTextStyle: {
                            fontSize: 12, // 这个会影响坐标轴的字体大小，不懂为什么
                            fontFamily: '微软雅黑',
                        },
                        axisLabel: {
                            textStyle: {
                                // color: 'white',
                                color: 'black',
                            },
                            formatter: '{value}',
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                // type: "dashed",
                                color: "#E9E9E9"
                            },
                        },
                        axisTick: {
                            show: false,
                        },
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: 'RGB(47,68,114)',
                            },
                        },
                    }],
                    series: seriesData,
                };

                this.chartDiv.setOption(option);
                window.addEventListener('resize',()=>{
                    this.chartDiv.resize();
                });
            }
        }
    }
</script>

<style scoped>

</style>
